<template>
	<div id="home">
		<div class="header">
			<h1>网易彩票</h1>
			<div id="denglu">
				<i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
				<i class="fa fa-user-circle-o" aria-hidden="true"></i>
			</div>
		</div>
		<div class="kebody">
			<div id="totalAward" style="width: 100%; height: 40px;line-height: 40px;padding-left: 20px;background: white;">网易彩票已累计中奖：
				<span style="color: red;">100亿2896万</span>
			</div>
			<ul class="linghongbaokaijing">
				<li>
					<i class="fa fa-dot-circle-o" aria-hidden="true" style="color: blue;"></i>
					<span class="" style="color: blue;">领红包</span>
				</li>
				<li>
					<i class="fa fa-diamond" aria-hidden="true" style="color: orange;"></i>
					<span class="" style="color: orange;">开奖</span>
				</li>
				<li>
					<i class="fa fa-arrow-circle-o-down" aria-hidden="true" style="color: red;"></i>
					<span class="" style="color: red;">下载</span>
				</li>
				<li>
					<i class="fa fa-id-card-o" aria-hidden="true" style="color: green;"></i>
					<span class="" style="color: green;">资讯</span>
				</li>
			</ul>
			<div id="showwed">
				<ul class="showwed">
					<li v-for="(item,key) in allgames" :key="key"
						>
						<img :src='"http://192.168.2.245:3000"+item.icon2' style="height: 70px; width: 70px;"/>
						<div>
							<h3>{{item.cn}}</h3>
							<span>试试脚气</span>
						</div>
					</li>
				</ul>
			</div>
			
		</div>
		<div class="kebottom">
			kebottom
		</div>
		<div class="kecopy">
			kecopy
		</div>
	</div>
</template>

<script>
	export default {
		computed:{
			allgames(){
				return this.$store.getters.allgames
			}
		},
		mounted(){
			this.$store.dispatch('loadallgames');
		}
		
	}
</script>

<style lang="scss" scoped>
	#home{
		width: 100%;
		height: 1180px;
		background: lavender;
		.header{
			width: 100%;
			height: 40px;
			background: #d91d37;
			display: flex;
			justify-content: space-between;
			
			h1{
				width: 26%;
				text-align: center;
				line-height: 40px;
				color: white;
				
			}
			#denglu{
				width: 20%;
				display: flex;
				justify-content: space-around;
				.fa-arrow-circle-o-down{
					padding-top: 5px;
					font-size: 30px;
					color: white;
				}
				.fa-user-circle-o{
					padding-top: 8px;
					font-size: 25px;
					color: white;
					
				}
			}
		
		}
		.kebody{
			width: 100%;
			height: 1047px;
			background: lightgray;
		
			.linghongbaokaijing{
				width: 100%;
				height: 85px;
				display: flex;
				justify-content: space-around;
				background: white;
				margin-bottom:20px;
				li {
					width: 100%;
					height: 80px;
					display: flex;
					flex-direction: column;
					align-items: center;
					i {
						font-size: 45px;
					}
					span {
						font-size: 20px;
					}
				}
			}
			#showwed{
				background: white;
				width: 100%;
			
				height: 900px;
				overflow: scroll;
				.showwed{
					width: 100%;
					height: 86px;
					li{
						width: 50%;
						height: 100px;
						float: left;
						display: flex;
						/*flex-direction: column;*/
						justify-content: space-around;
						align-items: center;
						margin-bottom: 20px;
						img{
							width: 48%;
							
						}
						div{
							width: 62%;
							display: flex;
							flex-direction: column;
							h3{
								color: red;
								margin-bottom: 15px;
							}
						}
					}
					
				}
			}
		}
		.kebottom{
			width: 100%;
			height: 60px;
			background: lemonchiffon;
		}
		.kecopy{
			width: 100%;
			height: 33px;
			background: lemonchiffon;
		}
	}
</style>